<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城首页</title>
    <link href="/favicon.ico" rel="icon" type="image/x-icon">
    <link href="res/static/css/main.css" rel="stylesheet" type="text/css">
    <link href="res/layui/css/layui.css" rel="stylesheet" type="text/css">
    <script src="res/layui/layui.js" type="text/javascript"></script>
    <script src="res/static/js/util/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="res/static/js/util/jquery.cookie.js" type="text/javascript"></script>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport">
    <meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible">
</head>
<body id="list-cont">
<div class="site-nav-bg">
    <div class="site-nav w1200">
        <p class="sn-back-home">
            <i class="layui-icon layui-icon-home"></i>
            <a href="/">首页</a>
        </p>
        <div class="sn-quick-menu">
            <div class="login"><a href="login.html" id="loginbtn">登录</a></div>
            <div class="login"><a href="druid">监控</a></div>
            <div class="login" id="logout"></div>
            <div class="sp-cart"><a href="shopcart.html">购物车</a><span id="cart-num">0</span></div>
        </div>
    </div>
</div>


<div class="header">
    <div class="headerLayout w1200">
        <div class="headerCon">
            <h1 class="mallLogo">
                <a href="index.html" title="极品商城">
                    <img src="res/static/img/logo.png">
                </a>
            </h1>
            <div class="mallSearch">
                <form action="search_list.html" class="layui-form" novalidate>
                    <input autocomplete="off" class="layui-input" lay-verify="required" name="title"
                           placeholder="请输入需要的商品"
                           required type="text">
                    <button class="layui-btn" lay-filter="formDemo" lay-submit>
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                    <input name="" type="hidden" value="">
                </form>
            </div>
        </div>
    </div>
</div>


<div class="content">
    <div class="main-nav">
        <div class="inner-cont0">
            <div class="inner-cont1 w1200">
                <div class="inner-cont2">
                </div>
            </div>
        </div>
    </div>
    <div class="category-banner">
        <div class="layui-carousel" id="test1">
            <div carousel-item="">
                <div><img src="res/static/img/banner1.jpg"></div>
                <div><img src="res/static/img/banner2.jpg"></div>
                <div><img src="res/static/img/banner3.jpg"></div>
            </div>
        </div>
    </div>
    <div class="category-con">
        <div class="category-inner-con w1200">
            <div class="category-type">
                <h3>全部分类</h3>
            </div>
            <div class="category-tab-content">
                <div class="nav-con">
                    <ul class="normal-nav layui-clear">
                        <li class="nav-item"><a href="search_list.html?category=笔记本电脑">
                            <div class="title">笔记本电脑</div>
                            <p><a href="">手机</a><a href="">电脑</a><a href="">配件</a></p>
                            <i class="layui-icon layui-icon-right"></i></a>
                        </li>
                        <li class="nav-item"><a href="search_list.html?category=白酒">
                            <div class="title">中外名酒</div>
                            <p><a href="">白酒</a><a href="">红酒</a><a href="">葡萄酒</a></p>
                            <i class="layui-icon layui-icon-right"></i></a>
                        </li>
                        <li class="nav-item"><a href="search_list.html?category=耳机耳麦">
                            <div class="title">电子配件</div>
                            <p><a href="">耳机</a><a href="">耳麦</a><a href="">其他配件</a></p>
                            <i class="layui-icon layui-icon-right"></i></a>
                        </li>
                        <li class="nav-item"><a href="search_list.html?category=水果生鲜">
                            <div class="title">水果生鲜</div>
                            <p><a href="">水果</a><a href="">海鲜</a><a href="">特产</a></p>
                            <i class="layui-icon layui-icon-right"></i></a>
                        </li>
                        <li class="nav-item"><a href="search_list.html?category=美妆馆">
                            <div class="title">美妆产品</div>
                            <p><a href="">化妆品</a><a href="">护肤品</a><a href="">营养品</a></p>
                            <i class="layui-icon layui-icon-right"></i></a>
                        </li>
                        <li class="nav-item"><a href="search_list.html?category=家用电器">
                            <div class="title">家用电器</div>
                            <p><a href="">电视</a><a href="">空调</a><a href="">洗衣机</a></p>
                            <i class="layui-icon layui-icon-right"></i></a>
                        </li>
                        <li class="nav-item"><a href="search_list.html?category=居家日用">
                            <div class="title">居家日用</div>
                            <p><a href="">水具酒具</a><a href="">烹饪锅具</a><a href="">抱枕靠垫</a></p>
                            <i class="layui-icon layui-icon-right"></i></a>
                        </li>
                        <li class="nav-item nobor"><a href="search_list.html?category=汽车用品">
                            <div class="title">汽车用品</div>
                            <p><a href="">行车记录仪</a><a href="">车载充电器</a><a href="">蓄电池</a></p>
                            <i class="layui-icon layui-icon-right"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


    <!--今日必抢-->
    <div class="floors">
        <div class="sk">
            <div class="sk_inner w1200">
                <div class="sk_hd">
                    <a href="javascript:">
                        <img src="res/static/img/s_img1.jpg">
                    </a>
                </div>
                <div class="sk_bd">
                    <div class="layui-carousel" id="test2">
                        <div carousel-item>
                            <div class="item-box" id="item-box-demo">


                            </div>
                            <div class="item-box" id="item-box-demo1">


                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!--楼层展示-->
    <div class="product-cont w1200" id="product-cont">

    </div>


    <!--更多推荐-->
    <div class="product-list-box" id="product-list-box">
        <div class="product-list-cont w1200">
            <h4>更多推荐</h4>
            <div class="product-item-box layui-clear" id="product-box-list">

            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="ng-promise-box">
        <div class="ng-promise w1200">
            <p class="text">
                <a class="icon1" href="javascript:">7天无理由退换货</a>
                <a class="icon2" href="javascript:">满99元全场免邮</a>
                <a class="icon3" href="javascript:" style="margin-right: 0">100%品质保证</a>
            </p>
        </div>
    </div>
    <div class="mod_help w1200">
        <p>
            <a href="javascript:">关于我们</a>
            <span>|</span>
            <a href="javascript:">帮助中心</a>
            <span>|</span>
            <a href="javascript:">售后服务</a>
            <span>|</span>
            <a href="javascript:">极品资讯</a>
            <span>|</span>
            <a href="javascript:">关于货源</a>
        </p>
        <p class="coty">极品商城版权所有 &copy; 2012-2020</p>
    </div>
</div>

<script id="demo" type="text/html">
    {{# layui.each(d.floor.banner.cont,function(index,item){}}
    <div class="item">
        <a href="details.html?id={{item.id}}"><img src="{{item.item_image_path}}"></a>
        <div class="title" style="width: 190px;height:40px;font-size: 10px;overflow: hidden;">{{item.title}}</div>
        <div class="price">
            <span>￥{{item.price}}</span>
        </div>
    </div>
    {{# }); }}
</script>

<script id="demo1" type="text/html">
    {{# layui.each(d.proct,function(index,item){}}
    <div class="product-item {{item.productItem}} layui-clear">
        <div class="left-title">
            <h4><i>{{item.floorNum}}</i></h4>
            <img src="{{item.carImg}}">
            <h5>{{item.text}}</h5>
        </div>
        <div class="right-cont">
            <img src="{{item.bigImg}}" alt="">
            <div class="img-box">
                {{# layui.each(item.imgBox,function(index1,item1){}}
                <a href="details.html?id={{item1.id}}"><img src="{{item1.item_image_path}}"></a>
                {{# }); }}
            </div>
        </div>
    </div>
    {{# }); }}
</script>


<script id="demo2" type="text/html">
    {{# layui.each(d.productList,function(index,item){}}
    <div class="list-item">
        <a href="details.html?id={{item.id}}"><img src="{{item.item_image_path}}"
                                                   style="width: 160px;height: 210px;padding: 0px;"></a>
        <p style="height:40px;font-size: 10px;overflow: hidden;">{{item.title}}</p>
        <span>￥{{item.price}}</span>
    </div>
    {{# }); }}
</script>

<script type="text/javascript">

    layui.config({
        base: 'res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
    }).use(['mm', 'carousel'], function () {
        var carousel = layui.carousel,
            mm = layui.mm;
        var option1 = {
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'none'
            , height: '400'
            , indicator: 'none'
        };
        var option2 = {
            elem: '#test2'
            , width: '100%' //设置容器宽度
            , arrow: 'always'
            , height: '298'
            , interval: 5000
            , indicator: 'none'
        };
        carousel.render(option1);
        carousel.render(option2);
        // 模版引擎导入
        // var ins = carousel.render(option);
        // var html = demo.innerHTML;
        // var listCont = document.getElementById('list-cont');
        // // console.log(layui.router("#/about.html"))
        //  mm.request({
        //    url: 'json/index.json',
        //    success : function(res){
        //      console.log(res)
        //      listCont.innerHTML = mm.renderHtml(html,res)
        //      ins.reload(option);
        //    },
        //    error: function(res){
        //      console.log(res);
        //    }
        //  })

        var html = demo.innerHTML;
        var html_proct = demo1.innerHTML;
        var html_productList = demo2.innerHTML;
        var listCont = document.getElementById('item-box-demo');
        var listCont1 = document.getElementById('item-box-demo1');
        var proct = document.getElementById('product-cont');
        var productList = document.getElementById('product-box-list');
        mm.request({
            url: 'init',
            success: function (res) {
                console.log(res);
                listCont.innerHTML = mm.renderHtml(html, res);
                listCont1.innerHTML = mm.renderHtml(html, res);
                proct.innerHTML = mm.renderHtml(html_proct, res);
                productList.innerHTML = mm.renderHtml(html_productList, res)
            },
            error: function (res) {
                console.log(res);
            }
        })

    });
</script>


<script type="text/javascript">
    $(function () {
        // 想要获取的cook键值

        getCartNum();
        // 调用
        var x = getCookie("userTel");
        if (x != null && x !== "") {
            $("#loginbtn").html("个人中心");
            $("#loginbtn").prop("href", "consumer_center.html");
            $("#logout").html("<a href=\"UserLogOut\">退出</a>");
        }


        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
            }
            return "";
        }

        function getCartNum() {  //获取购物车中商品数量
            var index = 0;
            for (var i = 0; i < 30; i++) {
                if ($.cookie(i.toString()) == null) {

                } else {
                    index++;
                }
            }
            $("#cart-num").html(index);
        }

    })
</script>

</body>
</html>